<!DOCTYPE html><html><head><title>08-选择器高级及a伪类</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="08-选择器高级及a伪类">08-选择器高级及a伪类</h1>

<h3 id="一css选择器高级">一、css选择器高级</h3>



<h4 id="1基本选择器">1、基本选择器</h4>

<table><tbody><tr style="font-weight:bold">  <td align="center">选择器</td>  <td align="center">名称</td>  <td align="center">选择范围</td></tr><tr>  <td align="center"><code>*</code></td>  <td align="center"><code>通配符</code></td>  <td align="center">选择<code>所有</code>标签</td></tr><tr>  <td align="center"><code>tag</code></td>  <td align="center"><code>标签选择器</code></td>  <td align="center">选择所有<code>相同标签名称</code>的标签</td></tr><tr>  <td align="center"><code>class</code></td>  <td align="center"><code>类选择器</code></td>  <td align="center">选择<code>类</code>名称相同的标签</td></tr><tr>  <td align="center"><code>#id</code></td>  <td align="center"><code>id选择器</code></td>  <td align="center">选择<code>ID</code>名称相同的标签</td></tr></tbody></table>



<h4 id="2多元素的组合选择器">2、多元素的组合选择器</h4>

<p><code>E,F</code> ： 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔</p>



<pre class="prettyprint hljs-dark"><code class="hljs stylus"><div class="hljs-line"><span class="hljs-comment">//选中所有的div和p标签</span>
</div><div class="hljs-line"><span class="hljs-selector-tag">div</span>,p{
</div><div class="hljs-line">    <span class="hljs-attribute">color</span>:<span class="hljs-number">#f00</span>;
</div><div class="hljs-line">}
</div></code></pre>

<p><code>E F</code> ： 后代选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔-包含子元素和孙元素。</p>



<pre class="prettyprint hljs-dark"><code class="hljs stylus"><div class="hljs-line"><span class="hljs-comment">//选择div标签下所有的后代p标签</span>
</div><div class="hljs-line"><span class="hljs-selector-tag">div</span> p{
</div><div class="hljs-line">    <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#f00</span>;
</div><div class="hljs-line">}
</div></code></pre>

<p><code>E &gt; F</code> ：子元素选择器，匹配所有E元素的子元素F</p>



<pre class="prettyprint hljs-dark"><code class="hljs stylus"><div class="hljs-line"><span class="hljs-comment">//只选择div的儿子p标签</span>
</div><div class="hljs-line"><span class="hljs-selector-tag">div</span> &gt; p{
</div><div class="hljs-line">    <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#f00</span>;
</div><div class="hljs-line">}
</div></code></pre>

<p><code>E + F</code>：    相邻兄弟元素选择器，匹配所有紧随E元素之后的同级（兄弟）元素F（只有一个）</p>



<pre class="prettyprint hljs-dark"><code class="hljs stylus"><div class="hljs-line"><span class="hljs-comment">//选择紧随div的亲兄弟p标签，隔等级的不要</span>
</div><div class="hljs-line"><span class="hljs-selector-tag">div</span> + p{
</div><div class="hljs-line">    <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#f00</span>;
</div><div class="hljs-line">}
</div></code></pre>

<p><code>E ~ F</code>：（CSS3的选择器）选择E元素后的所有兄弟F元素</p>



<pre class="prettyprint hljs-dark"><code class="hljs stylus"><div class="hljs-line"><span class="hljs-comment">//选择div后面所有的亲兄弟p标签</span>
</div><div class="hljs-line"><span class="hljs-selector-tag">div</span> ~ p{
</div><div class="hljs-line">    <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#f00</span>;
</div><div class="hljs-line">}
</div></code></pre>



<h4 id="3标签属性选择器">3、标签属性选择器</h4>

<p><code>[att]</code>       ：匹配所有具有att标签属性的元素   </p>



<pre class="prettyprint hljs-dark"><code class="hljs hsp"><div class="hljs-line"><span class="hljs-comment">//css代码</span>
</div><div class="hljs-line">[<span class="hljs-keyword">title</span>]{
</div><div class="hljs-line">    background-<span class="hljs-keyword">color</span>:<span class="hljs-meta">#f00;</span>
</div><div class="hljs-line">}
</div><div class="hljs-line"><span class="hljs-comment">//html代码</span>
</div><div class="hljs-line">&lt;div <span class="hljs-keyword">title</span>=<span class="hljs-string">"xxx"</span>&gt;&lt;/div&gt;
</div></code></pre>

<p><code>[att=val]</code>：  匹配所有att标签属性等于“val”的元素   </p>



<pre class="prettyprint hljs-dark"><code class="hljs hsp"><div class="hljs-line"><span class="hljs-comment">//css代码</span>
</div><div class="hljs-line">[<span class="hljs-keyword">title</span>=<span class="hljs-string">"xxx"</span>]{
</div><div class="hljs-line">    background-<span class="hljs-keyword">color</span>:<span class="hljs-meta">#f00;</span>
</div><div class="hljs-line">}
</div><div class="hljs-line"><span class="hljs-comment">//html代码</span>
</div><div class="hljs-line">&lt;div <span class="hljs-keyword">title</span>=<span class="hljs-string">"xxx"</span>&gt;&lt;/div&gt;
</div></code></pre>

<p><code>[att~=val]</code>   ：   匹配所有att标签属性包含“val”或者等于“val”的元素(val必须是一个完整词)</p>



<pre class="prettyprint hljs-dark"><code class="hljs stylus"><div class="hljs-line"><span class="hljs-comment">//css代码</span>
</div><div class="hljs-line">[class~=<span class="hljs-string">"xxx"</span>]{
</div><div class="hljs-line">    <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#f00</span>;
</div><div class="hljs-line">}
</div><div class="hljs-line"><span class="hljs-comment">//html代码</span>
</div><div class="hljs-line">&lt;<span class="hljs-selector-tag">div</span> class=<span class="hljs-string">"aaa xxx"</span>&gt;&lt;/div&gt;
</div></code></pre>

<p><code>[att|=val]</code>   ：匹配所有att标签属性以val-’ 开头的(可以有多个值)（比如说zh-cn）</p>



<pre class="prettyprint hljs-dark"><code class="hljs arduino"><div class="hljs-line"><span class="hljs-comment">//css代码</span>
</div><div class="hljs-line">[<span class="hljs-keyword">class</span>|=<span class="hljs-string">"box"</span>]{
</div><div class="hljs-line">    <span class="hljs-built_in">background</span>-color:#f00;
</div><div class="hljs-line">}
</div><div class="hljs-line"><span class="hljs-comment">//html代码</span>
</div><div class="hljs-line">&lt;div <span class="hljs-keyword">class</span>=<span class="hljs-string">"box-a box"</span>&gt;&lt;/div&gt;
</div></code></pre>

<p><code>[att1][att2=val]</code>  ：匹配所有拥有att1标签属性同时具有att2标签属性等于’val’的元素</p>



<pre class="prettyprint hljs-dark"><code class="hljs markdown"><div class="hljs-line">//css代码
</div><div class="hljs-line">[<span class="hljs-string">title</span>][<span class="hljs-symbol">class="box"</span>]{
</div><div class="hljs-line"><span class="hljs-code">    background-color:#f00;</span>
</div><div class="hljs-line">}
</div><div class="hljs-line">//html代码
</div><div class="hljs-line"><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"box"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"xxx"</span>&gt;</span></span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
</div></code></pre>



<h3 id="二伪类和伪元素">二、伪类和伪元素</h3>



<h4 id="1伪类选择器">1、伪类选择器</h4>

<blockquote>
  <p>:link       匹配所有未被点击的链接 <br>
      :visited        匹配所有已被点击的链接 <br>
      <code>以上两种只能对超链接a标签生效</code>   </p>
  
  <p>:hover      匹配鼠标悬停其上的元素 <br>
      :active     匹配鼠标已经其上按下、还没有释放的元素 <br>
      <code>以上两种所有元素都可以生效</code> </p>
</blockquote>



<h4 id="2伪元素选择器">2、伪元素选择器</h4>

<p><code>E:before</code>   在元素内容前面插入内容</p>



<pre class="prettyprint hljs-dark"><code class="hljs css"><div class="hljs-line"><span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:before</span>{
</div><div class="hljs-line">    <span class="hljs-attribute">content</span>:<span class="hljs-string">""</span>;
</div><div class="hljs-line">}
</div></code></pre>

<p><code>E:after</code>在E元素内容后面插入内容</p>



<pre class="prettyprint hljs-dark"><code class="hljs css"><div class="hljs-line"><span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:after</span>{
</div><div class="hljs-line">    <span class="hljs-attribute">content</span>:<span class="hljs-string">""</span>;
</div><div class="hljs-line">}
</div></code></pre></div></body></html>